<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/less" href="../less/ProductList.less">
    <script src="../js/less.js"></script>
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">

        <div class="header_top">
            <div class="header_top_center clearFix w">
                <div class="header_top_center_left">
                    <a href="#">DJI 大疆官网</a>
                    <ul>
                        <li>下单即享 1% DJI币返点</li>
                    </ul>
                </div>
                <div class="header_top_center_right">
                    <ul>
                        <li class="iconfont"><a href="#">购物车</a></li>
                        <li><a href="#">登陆</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">中国大陆(简体中文/￥CNY)</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="header_content">
            <div class="header_content_center clearFix w">
                <div class="header_content_center_left">
                    <div class="iconfont">
                        <span class="iconfont">&#xe6f7;</span>
                        <i>商城</i>
                    </div>
                    <ul>
                        <li class="iconfont">商品分类</li>
                        <li><a href="#">以旧换新</a></li>
                        <li><a href="#">购机指南</a></li>
                        <li><a href="#">DJI 大疆商城 APP</a></li>
                    </ul>
                </div>
                <div class="header_content_center_right">
                    <form action="">
                        <input type="text" placeholder="搜索商品...">
                        <button class="iconfont">&#xe67d;</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="header_bottom w">
            <ul>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li>
            </ul>
        </div>

    </div>

    <!-- 商品列表页大图 -->
    <div class="ProductListImg">
        <img src="https://stormsend1.djicdn.com/stormsend/uploads/955fd0c180b7f7d94b36a833b82f34e9.jpg" alt="">
    </div>

    <!-- 商品推荐 -->
    <div class="ProductList_content">
        <div class="ProductList_content_wrap w">

            <!-- 模块复用 -->
            <div class="ProductList_content_wrap_bottom">
                <div class="content_bottom_header clearFix">
                    <h2>御 Mavic</h2>
                    <a href="#">更多></a>
                </div>

                <div class="content_bottom_top clearFix">
                    <div class="content_bottom_top_left">
                        <a href="#">
                            <img src="https://stormsend1.djicdn.com/stormsend/uploads/bb3757c035de90f760ca73b8c69cd663.png"
                                alt="">
                            <span>
                                <h2>DJI MINI 2</h2>
                                <p class="content_bottom_top_left_a">
                                    小巧但性能犀利，可拍摄4K视频，实现4倍变焦，最远10公里控制距离。一键短片、一键全景，一键直出大片。智能易用，航拍轻而易举。
                                </p>
                                <p class="content_bottom_top_left_b">
                                    ￥2899
                                </p>
                            </span>
                        </a>
                    </div>
                    <div class="content_bottom_top_right">
                        <video loop autoplay muted
                            src="https://stormsend1.djicdn.com/stormsend/uploads/bdeb2840ffcc01384f79787b8ab113e3.mp4"
                            poster="https://stormsend1.djicdn.com/stormsend/uploads/dea08c26be64fd58d54c71c647206001.jpg"></video>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚区域 -->
    <div class="footer">
        <div class="footer_wrap w">

            <div class="footer_wrap_top">
                <div class="footer_wrap_top_item">
                    <img src="../imgs/truck-moving.svg" alt="">
                    <p>
                        全场满 ¥99 顺丰包邮<br>
                        （顺丰无法配送的区域将使用 EMS）
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="../imgs/credit-card.svg" alt="">
                    <p>
                        支持支付宝、微信、银联、银行转账<br>
                        支持花呗、京东白条和招行分期
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="../imgs/comment-alt-smile.svg" alt="">
                    <p>
                        邮箱: <a href="#">support@dji.com</a>
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="../imgs/newGovIcon.gif" alt="">
                    <!-- <p>
                        全场满 ¥99 顺丰包邮<br>
                        （顺丰无法配送的区域将使用 EMS）
                    </p> -->
                </div>
            </div>

            <div class="footer_wrap_content clearFix">
                <div class="footer_wrap_content_top clearFix">
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <form action="">
                        <p>订阅</p>
                        <p>第一时间了解我们的促销活动、热销产品和最新信息。</p>
                        <input type="text" placeholder="请输入您的邮箱"><button>></button>
                    </form>
                </div>
                


                <div class="footer_wrap_content_left">
                    <ul class="clearFix">
                        <li class="iconfont"><a href="#">&#xe6f7;</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招聘精英</a></li>
                        <li><a href="#">官方旗舰店</a></li>
                    </ul>
                </div>
                <div class="footer_wrap_content_right">
                    <ul>
                        <li><a href="#" class="iconfont">&#xe69a;</a></li>
                        <li><a href="#" class="iconfont">&#xe63e;</a></li>
                        <li><a href="#" class="iconfont">&#xe605;</a></li>
                    </ul>
                </div>
            </div>

            <div class="footer_wrap_bottom clearFix">
               <div class="footer_wrap_bottom_left clearFix">
                <span>
                    Copyright © 2021 DJI 大疆创新 版权所有
                </span>
                <ul>
                    <li>
                        <a href="#">隐私权政策<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">使用条款<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">粤ICP备12032134号-11<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">营业执照<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">网站地图</a>
                    </li>
                </ul>
               </div>
               <div class="footer_wrap_bottom_right">
                <span>网站问题反馈？</span>
                <a href="#">点击这里</a>
               </div>
            </div>

        </div>
    </div>
</body>
</html>